<!-- include a-frame -->
<script src="../vendor/aframe/build/aframe.js"></script>
<!-- include ar.js for aframe -->
<script src='../../build/aframe-ar.js'></script>
<script>ARjs.Context.baseURL = '../../../three.js/'</script>
<!-- include aframe-portal-door -->
<script src='src/aframe-portal-door.js'></script>
<script src='src/threex-portal-door.js'></script>

<!-- start the body of your page -->
<body style='margin : 0px; overflow: hidden;'>
	<!-- add some info at the top of the page -->
	<div style='position: fixed; top: 10px; width:100%; text-align: center; z-index: 1;'>
		<a href="https://github.com/jeromeetienne/AR.js/" target="_blank">AR.js</a> - Two-ways Portal 360 for a-frame by <a href='https://twitter.com/jerome_etienne' target='_blank'>@jerome_etienne</a>
	</div>

	<!-- Define your 3d scene and enabled ar.js -->
	<a-scene embedded arjs='trackingMethod: best;'>

		<!-- Create a anchor to attach your augmented reality -->
		<a-anchor hit-testing-enabled='true'>

			<!-- portal 360 with an image -->
			<!-- <a-portal-door url='images/360_topaz.png' position='0 0 0' scale='1 1 1' rotation='0 90 0'><a-portal-door> -->

			<!-- portal 360 with an video -->
			<!-- <a-portal-door url='videos/pano.webm' position='0 0 0' scale='2 2 2' rotation='0 90 0'><a-portal-door> -->
			<a-portal-door url='videos/aframe-city-360.mp4' position='0 0 0' scale='2 2 2' rotation='0 90 0'><a-portal-door>

		</a-anchor>

		<!-- Define a static camera -->
		<a-camera-static/>
	</a-scene>
</body>
